<template>
    <div class="img-layout" :class="{'normal':!zoom_img,'zoom':zoom_img}">
        <div class="img-box" @click.stop="zoom_img=!zoom_img">
            <img :src="src" :class="[thumbSize,'resize-img']" @click.stop="zoom_img=!zoom_img">
        </div>
    </div>
    
</template>
<script>
export default {
    name:'ResizeImg',
    data(){
        return {
            zoom_img:false
        }
    },
    props:{
        src:[String,Object],
        thumbSize:{
            type:String,
            default:'s'
        },
        autoOpen:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        
    },
    watch:{
        
    },
    mounted(){
        if(this.autoOpen==true){
            this.zoom_img = true;
        }
    }
}
</script>
<style scoped>
.img-layout.normal{
    position: relative;
    display: inline-block;
}

.img-layout.zoom{
    position: fixed;
    display: block;
    top: 0px;
    left:0px;
    right: 0px;
    bottom: 0px;
    z-index: 10003;
}

.img-layout.normal .img-box{
    position: static;
}

.img-layout.zoom .img-box{
    position: absolute;
    width: 100%;
    height:100%;
    top:0px;
    left: 0px;
    right:0px;
    text-align: center;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

.img-layout.normal .resize-img{
    display: inline-block;
}

.img-layout.normal .resize-img.s{
    max-width: 34px;
    max-height: 34px; 
}

.img-layout.normal .resize-img.m{
    max-width: 65px;
    max-height: 65px; 
}

.img-layout.normal .resize-img.l{
    max-width: 90px;
    max-height: 90px; 
}

.img-layout.normal .resize-img.xl{
    max-width: 500px;
    max-height: 500px; 
}

.img-layout.zoom .resize-img{
    max-width: 1000px;
    max-height: 850px;
    box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}

.resize-img{
    cursor: pointer;
    transition: all 0.15s ease-in 0.1s;
}
</style>